<template>
  <div class="map-container">
    <el-card class="box-card el-col-offset-7" style="margin-top: 100px" id="aa">
      <span style="font-size: 30px;font-weight: bolder;margin-top: 20px; margin-left: 180px;color: steelblue">用户登录</span>
      <el-form :model="userForm" ref="userForm" label-width="85px" >
        <el-form-item label="" prop="userName" >
          用户名 <el-input v-model="userForm.userName" style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item label="" prop="userPass">
          密码 <el-input type="password" v-model="userForm.userPass" style="width: 330px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm('userForm')"style="margin-left: 90px">登录</el-button>
          <!--          <el-button @click="resetForm('userForm')">重置</el-button>-->
          <el-button @click="registerForm()">注册</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return{
        userForm:{
          userId: '',
          userName:'',
          userPass:'',
        }
      }
    },
    methods:{
      submitForm(userForm) {
        this.$axios.post('/fontuser/login1',this.userForm).then(res=>{
          // console.log("login code===>"+res.data.code)//true
          if (res.code==200){
            console.log(this.userForm)
            //存储后端返回的jwt作为令牌
            localStorage.setItem("token",res.data)

            localStorage.setItem("userId",this.userForm.userId)
            localStorage.setItem("userName",this.userForm.userName)
            this.$router.push('/');
          }else{
            this.$message.error('账号登录错误了哦!');
            this.$refs[userForm].resetFields();
          }
        })
      },
      resetForm(userForm) {
        this.$refs[userForm].resetFields();
      },
      registerForm(){

        this.$router.push("/register")
      }
    }
  }

</script>

<style scoped>
  #aa{
    background-image: url('../assets/14.jpg');
    background-size: cover;
    background-position: center center;
  //opacity: 0.9;
  }
  .map-container{
    background-image: url('../assets/7.jpg');
    background-size: cover;
    background-position: center center;
  //opacity: 0.9;
    width: 1520px;
    height: 700px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
